<script>
import { reactive, toRefs } from 'vue';
import request from '../request';
import { ElMessage } from 'element-plus';
import { useMainStore } from '../store';
import { useRouter } from 'vue-router';
export default {
	name: 'LoginPage',
	components: {},
	setup() {
		const data = reactive({
			info: {
				name: '',
				password: '',
			},
			rules: {
				name: [{ required: true, message: '账号输入错误', trigger: 'blur' }],
				password: [{ required: true, message: '密码输入错误', trigger: 'blur' }],
			},
		});
		let ruleFormRef = ref(null);
		const store = useMainStore();
		const router = useRouter();
		// 登录接口
		const submitForm = () => {
			const params = {
				phone: data.info.name,
				password: data.info.password,
				type: 'login',
			};
			request('/login', params).then((res) => {
				console.log('登录', res);
				if (res.status === 'S') {
					ElMessage.success('登录成功');
					store.token = true;
					store.userInfo = res.data;
					router.replace('/');
				} else {
					if (!res.sign) {
						ElMessage.error('请先在小程序宛励空间进行注册');
						return;
					}
					ElMessage.error(res.message);
				}
			});
		};
		return {
			...toRefs(data),
			ruleFormRef,
			submitForm,
		};
	},
};
</script>
<template>
	<div class="login-page flexr flexcc flex-j-e">
		<div class="wrap">
			<h4>宛励空间管理后台</h4>
			<el-form label-position="left" label-width="60px" :model="info" ref="ruleFormRef" :rules="rules">
				<el-form-item label="账号" prop="name">
					<el-input v-model="info.name" placeholder="请输入手机号" autocomplete="off" />
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="info.password" type="password" placeholder="请输入密码" autocomplete="off" />
				</el-form-item>
			</el-form>
			<el-button type="primary" @click="submitForm" class="btn" :disabled="!info.name || !info.password" native-type="submit"> 登录 </el-button>
		</div>
	</div>
</template>
<style lang="less">
.login-page {
	width: 100%;
	height: 100%;
	background: url('../assets/image/login-bg.jpg') no-repeat;
	background-size: 100% 100%;
	.wrap {
		width: 400px;
		box-sizing: border-box;
		padding: 30px 40px 60px;
		border-radius: 20px;
		background: #fff;
		margin-right: 200px;
	}
	.el-form-item {
		margin-bottom: 30px;
	}
	.btn {
		width: 100%;
		height: 40px;
		margin-top: 40px;
	}
	h4 {
		text-align: center;
		margin-bottom: 30px;
		font-size: 20px;
		font-weight: bold;
	}
}
</style>
